<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设备详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jquery.contextMenu.min.css">
    <link rel="stylesheet" href="/style/jquery.jsonview.min.css">
    <style>
        iframe {
            border: none;
            width: 100%;
            height: 1080px;
            margin: 0px;
            overflow: scroll;
        }
    </style>
</head>

<body>

    <div class="layui-fluid" id="LAY-app-message">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基础信息</li>
                    <li>附件信息</li>
                    <li>关联信息</li>
                    <li>物联设备</li>
                    <li>相关文件</li>
                    <li>运维信息</li>
                </ul>
                <div class="layui-tab-content">
                    <!--基础信息-->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="#" lay-filter="device-form">
                            <div class="LAY-app-message-btns" style="margin-bottom:20px;">
                                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="device-apply">
                                    应用
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit
                                    lay-filter="device-info-refresh">刷新
                                </button>
                            </div>
                            <input type="hidden" name="id">
                            <div class="layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*设备名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" class="layui-input" lay-verify="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*设备简称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="abbr" class="layui-input" lay-verify="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">设备编码</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="code" class="layui-input" placeholder="不填由系统生成">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">设备代号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="no" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*设备系统</label>
                                        <div class="layui-input-block">
                                            <select id="system" name="system" lay-filter="system" lay-verify="required">
                                                <option value="">选择系统</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*设备类型</label>
                                        <div class="layui-input-block">
                                            <select id="type" name="type" lay-filter="type" lay-verify="required">
                                                <option value="">选择类型</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*建筑群</label>
                                        <div class="layui-input-block">
                                            <select id="tunnelId" name="tunnelId" lay-filter="tunnelId"
                                                lay-verify="required" lay-search>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*区域</label>
                                        <div class="layui-input-block">
                                            <select id="locationId" name="locationId" lay-filter="locationId"
                                                lay-verify="required" lay-search>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">品牌</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="brand" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">型号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="model" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">规格</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="spec" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">出厂编号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="productNo" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">生产日期</label>
                                        <div class="layui-input-block">
                                            <input id="product-date" type="text" name="productDate" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">使用年限</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="serviceYears" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">物联设备</label>
                                        <div class="layui-input-block">
                                            <select name="isIot">
                                                <option value=""></option>
                                                <option value="1">是</option>
                                                <option value="0">否</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">设备状态</label>
                                        <div class="layui-input-block">
                                            <select name="state">
                                                <option value=""></option>
                                                <option value="0">禁用</option>
                                                <option value="1">运行</option>
                                                <option value="2">维修</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">最近运维日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="lastMaintainDate" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计划运维日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="nextMaintainDate" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">运维次数</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="maintainTimes" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="note" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--附件信息-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="accessory-add-btn" class="layui-btn layui-btn-sm">添加</button>
                            <button id="accessory-clear-btn" class="layui-btn layui-btn-primary layui-btn-sm">清空
                            </button>
                            <button id="accessory-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="accessory-table" lay-filter="accessory-table"></table>
                        <script type="text/html" id="accessory-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="replace">更换记录</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--关联设备-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="device-relation-add-btn" class="layui-btn layui-btn-sm">添加</button>
                            <button id="device-relation-clear-btn" class="layui-btn layui-btn-primary layui-btn-sm">清空
                            </button>
                            <button id="device-relation-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="device-relation-table" lay-filter="device-relation-table"></table>
                        <script type="text/html" id="device-relation-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--物联设备-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="iot-device-add-btn" class="layui-btn layui-btn-sm">添加</button>
                            <button id="iot-device-clear-btn" class="layui-btn layui-btn-primary layui-btn-sm">清空
                            </button>
                            <button id="iot-device-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="iot-device-table" lay-filter="iot-device-table"></table>
                        <script type="text/html" id="iot-device-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--相关文件-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="device-file-add-btn" class="layui-btn layui-btn-sm">添加</button>
                            <button id="device-file-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="device-file-table" lay-filter="device-file-table"></table>
                        <script type="text/html" id="device-file-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--运维信息-->
                    <div class="layui-tab-item">
                        <iframe id="device-maintain-iframe" src="#"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--附件信息-->
    <script type="text/html" id="accessory-form">
    <div class="layui-card">
        <div class="layui-card-header">设备附件</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="accessory-form">
                <input type="hidden" name="id">
                <input type="hidden" name="deviceId">
                <div class="layui-form-item">
                    <label class="layui-form-label">备件台账</label>
                    <div class="layui-input-block">
                        <select id="search-spareparts" lay-filter="search-spareparts" lay-search="">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-name" name="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-brand" name="brand" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">型号/规格</label>
                    <div class="layui-input-block">
                        <input type="text" id="accessory-model" name="model" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-block">
                        <input type="number" name="quantity" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出厂编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNo" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-block">
                        <input id="product-date" type="text" name="productDate" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用年限</label>
                    <div class="layui-input-block">
                        <input type="number" name="serviceYears" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="note" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit
                            lay-filter="accessory-form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>
    <!--关联设备-->
    <script type="text/html" id="device-relation-form">
    <div class="layui-card">
        <div class="layui-card-header">设备关系详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="device-relation-form">
                <input type="hidden" name="id">
                <input type="hidden" name="deviceId">
                <div class="layui-form-item">
                    <label class="layui-form-label">*关联设备</label>
                    <div class="layui-input-block">
                        <select id="device-relation-id" name="relatedDeviceId" lay-search>
                            <option value="">选择设备</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*关联类型</label>
                    <div class="layui-input-block">
                        <select id="type" name="type">
                            <option value="">请选择关联类型</option>
                            <option value="1">上级设备</option>
                            <option value="2">下级设备</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="device-relation-form-submit">确定
                    </button>
                </div>
                <div style="height:300px;"></div>
            </form>
        </div>
    </div>
</script>
    <!--物联设备-->
    <script type="text/html" id="iot-device-form">
    <div class="layui-card">
        <div class="layui-card-header">物联设备详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="iot-device-form">
                <input type="hidden" name="id">
                <input type="hidden" name="deviceId">
                <div class="layui-form-item">
                    <label class="layui-form-label">*选择建筑群</label>
                    <div class="layui-input-block">
                        <select id="station" lay-filter="station" lay-search>
                            <option value="">选择隧道</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*选择物联设备</label>
                    <div class="layui-input-block">
                        <select id="remote-iot-device" lay-filter="remote-iot-device" lay-search>
                            <option value="">选择物联设备</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*物联设备名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="iot-name" name="iotName" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*物联设备编码</label>
                    <div class="layui-input-block">
                        <input type="text" id="iot-code" name="iotCode" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="iot-device-form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>

    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/clipboard.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laytpl', 'upload', 'laydate'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var admin = layui.admin;
            var deviceId = getParam("id");
            var device;
            var popupIndex;
            var upload = layui.upload;
            var laydate = layui.laydate;

            document.getElementById('device-maintain-iframe').src = 'device-maintain-info.html?id=' + deviceId;

            form.render();
            laydate.render({
                elem: '#product-date'
            });

            function loadSpareparts(callback) {
                $.get('spareparts', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadTunnels(callback) {
                $.get('tunnels', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadLocations(tunnelId, callback) {
                $.get('locations/', { tunnelId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadDeviceSystems(callback) {
                $.get('/device-systems', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadDeviceTypes(callback) {
                $.get('/device-types', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            upload.render({
                elem: '#device-file-add-btn',
                url: '/device-files/upload/' + deviceId,
                accept: 'file',
                done: function (result) {
                    if (result.code == 200) {
                        layer.msg('上传成功');
                        table.reload('device-file-table');
                    } else {
                        layer.msg('上传失败：' + result.msg);
                    }
                },
                error: function () {
                    layer.msg('上传失败');
                }
            });

            loadDeviceInfo();

            /**
             * 加载设备信息
             */
            function loadDeviceInfo() {
                $.ajax({
                    url: "devices/" + deviceId,
                    success: function (result) {
                        if (result.code == 0 && result.data) {
                            var data = result.data;
                            device = data;
                            loadTunnels(function (res) {
                                res.forEach(function (item) {
                                    $('#tunnelId').append('<option value="' + item.id + '">' + item.name + '</option>');
                                });
                                form.val('device-form', data);
                                form.render();
                                form.on('select(tunnelId)', function (data) {
                                    loadLocations(data.value, function (res) {
                                        $('#locationId').empty();
                                        $('#locationId').append('<option value="">选择位置</option>');
                                        res.forEach(function (item) {
                                            $('#locationId').append('<option value="' + item.id + '">' + item.name + '</option>');
                                        });
                                        form.render();
                                    });
                                });
                            });
                            if (data.tunnelId) {
                                loadLocations(data.tunnelId, function (res) {
                                    $('#locationId').empty();
                                    $('#locationId').append('<option value="">选择位置</option>');
                                    res.forEach(function (item) {
                                        $('#locationId').append('<option value="' + item.id + '">' + item.name + '</option>');
                                    });
                                    form.val('device-form', data);
                                    form.render();
                                });
                            }
                            loadDeviceTypes(function (res) {
                                $('#type').empty();
                                res.forEach(function (item) {
                                    $('#type').append('<option value="' + item.name + '">' + item.name + '</option>');
                                });
                                form.val('device-form', data);
                                form.render();
                            });
                            loadDeviceSystems(function (res) {
                                $('#system').empty();
                                res.forEach(function (item) {
                                    $('#system').append('<option value="' + item.name + '">' + item.name + '</option>');
                                });
                                form.val('device-form', data);
                                form.render();
                            });
                        } else {
                            layer.msg('平台无此设备');
                        }
                    }
                });
            }

            function loadDevices(tunnelId, callback) {
                $.get('/devices', { tunnelId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadStations(callback) {
                $.get('/iot-stations', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadRemoteIoTDevices(stationId, callback) {
                $.get('/remote-iot-devices', { stationId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function showAccessoryForm(data) {
                popupIndex = admin.popupRight({
                    area: '560px',
                    success: function () {
                        var formHtml = $('#accessory-form').html();
                        $('#' + this.id).html(formHtml);
                        form.render();
                        laydate.render({
                            elem: '#product-date'
                        });
                        loadSpareparts(function (result) {
                            $('#search-spareparts').empty();
                            $('#search-spareparts').append('<option value="">请选择备件</option>');
                            for (var i in result) {
                                var item = result[i];
                                var name = item.name + '|' + (item.brand || '') + '|' + (item.model || '');
                                $('#search-spareparts').append('<option value="' + name + '">' + name + '</option>');
                            }
                            form.render();
                            form.on('select(search-spareparts)', function (data) {
                                var value = data.value;
                                var str = value.split("|");
                                $('#accessory-name').val(str[0]);
                                $('#accessory-brand').val(str[1]);
                                $('#accessory-model').val(str[2]);
                            });
                        });
                        if (data) {
                            form.val('accessory-form', data);
                        }
                    }
                });
            }

            function showDeviceRelationForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#device-relation-form').html();
                        $('#' + this.id).html(formHtml);
                        loadDevices(device.tunnelId, function (res) {
                            res.forEach(function (item) {
                                $('#device-relation-id').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            form.render();
                            if (data) {
                                form.val('device-relation-form', data);
                            }
                        });
                        form.render();
                        if (data) {
                            form.val('device-relation-form', data);
                        }
                    }
                });
            }

            function showIotDeviceForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#iot-device-form').html();
                        $('#' + this.id).html(formHtml);
                        loadStations(function (res) {
                            res.data.forEach(function (item) {
                                $('#station').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            form.render();
                            form.on("select(station)", function (data) {
                                var stationId = data.value;
                                loadRemoteIoTDevices(stationId, function (res) {
                                    res.data.forEach(function (item) {
                                        $('#remote-iot-device').append('<option value="' + item.code + '">' + item.name + '</option>');
                                    });
                                    form.render();
                                    form.on("select(remote-iot-device)", function (data) {
                                        var code = data.value;
                                        var name = $('#remote-iot-device option:selected').text();
                                        $('#iot-code').val(code);
                                        $('#iot-name').val(name);
                                    });
                                });
                            });
                            if (data) {
                                form.val('iot-device-form', data);
                            }
                        });
                        form.render();

                    }
                });
                return popupIndex;
            }

            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            /*表格加载区*/
            table.render({
                elem: '#device-file-table',
                url: '/device-files',
                title: '相关文件',
                skin: 'line',
                cols: [[
                    {
                        title: '序号', width: 60, templet: function (d) {
                            return d.LAY_TABLE_INDEX + 1;
                        }
                    },
                    { field: 'name', title: '文件名' },
                    { field: 'createTime', title: '上传时间' },
                    { fixed: 'right', title: '操作', toolbar: '#device-file-toolbar' }
                ]],
                page: true
            });

            table.render({
                elem: '#accessory-table',
                url: 'accessories',
                title: '附件信息',
                skin: 'line',
                cols:
                    [
                        [
                            {
                                title: '序号', width: 60, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            },
                            { field: 'name', title: '附件名称' },
                            { field: 'brand', title: '品牌' },
                            { field: 'model', title: '型号/规格' },
                            { field: 'unit', title: '单位' },
                            { field: 'quantity', title: '数量' },
                            { field: 'productNo', title: '出厂编号' },
                            { field: 'productDate', title: '生产日期' },
                            { field: 'serviceYears', title: '使用年限' },
                            { field: 'note', title: '备注' },
                            { fixed: 'right', title: '操作', toolbar: '#accessory-toolbar', width: 220 }
                        ]
                    ],
                where: {
                    deviceId: deviceId
                },
                page: true
            });

            table.render({
                elem: '#device-relation-table',
                url: 'device-relations',
                title: '关联信息',
                skin: 'line',
                cols:
                    [
                        [
                            {
                                title: '序号', width: 60, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            },
                            { field: 'typeText', title: '关联类型' },
                            { field: 'deviceCode', title: '关联设备编号' },
                            { field: 'deviceSystem', title: '设备系统' },
                            { field: 'locationName', title: '区域' },
                            { field: 'abbr', title: '设备简称' },
                            { fixed: 'right', title: '操作', toolbar: '#device-relation-toolbar' }
                        ]
                    ],
                where: {
                    deviceId: deviceId
                },
                page: true
            });

            table.render({
                elem: '#iot-device-table',
                url: 'iot-devices',
                title: '物联设备',
                skin: 'line',
                cols:
                    [
                        [
                            {
                                title: '序号', width: 60, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1;
                                }
                            },
                            { field: 'iotName', title: '物联设备名称' },
                            { field: 'iotCode', title: '物联设备编号' },
                            { fixed: 'right', title: '操作', toolbar: '#iot-device-toolbar' }
                        ]
                    ],
                where: {
                    deviceId: deviceId
                },
                page: true
            });

            table.on('tool(accessory-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "device-accessories/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('accessory-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showAccessoryForm(data);
                } else if (obj.event === 'replace') {
                    layer.open({
                        title: '附件更换记录',
                        type: 2,
                        content: 'device-accessory-replace.html?accessoryId=' + data.id,
                        area: ['960px', '620px'],
                        maxmin: true
                    });
                }
            });

            table.on('tool(device-relation-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "device-relations/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('device-relation-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showDeviceRelationForm(data);
                }
            });

            table.on('tool(iot-device-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "iot-devices/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('iot-device-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showIotDeviceForm(data);
                } else if (obj.event === 'detail') {
                    layer.open({
                        title: '物联设备详情',
                        type: 2,
                        content: 'https://tunnel.memanager.cn/dev/device-info.html?code=' + data.iotCode,
                        area: ['1200px', '680px'],
                        maxmin: true
                    });
                }
            });


            form.on('submit(accessory-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.deviceId = deviceId;
                $.ajax({
                    url: 'accessories',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('accessory-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            form.on('submit(device-relation-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.deviceId = deviceId;
                $.ajax({
                    url: 'device-relations',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('device-relation-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            form.on('submit(iot-device-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.deviceId = deviceId;
                $.ajax({
                    url: 'iot-devices',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('iot-device-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            /*工具栏区*/
            /*设备信息页*/
            form.on('submit(device-apply)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.id = deviceId;
                $.ajax({
                    url: 'devices',
                    method: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg("修改成功");
                            loadDeviceInfo();
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                return false;
            });

            form.on('submit(device-info-refresh)', function (data) {
                loadDeviceInfo();
                layer.msg("设备信息已刷新");
                return false;
            });

            /**
             * 添加按钮
             */
            $("#accessory-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showAccessoryForm();
            });

            $("#device-relation-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showDeviceRelationForm();
            });

            $("#iot-device-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showIotDeviceForm();
            });

            $("#btn-batch-delete").on('click', function () {
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                    var ids = [];
                    var data = table.checkStatus('device-info-table').data;
                    for (let i in data) {
                        ids.push(data[i].id);
                    }
                    $.ajax({
                        url: 'device-infos/' + ids.toString(),
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('device-info-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                });
            });

            table.on('tool(device-file-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该记录吗？', function (index) {
                        $.ajax({
                            url: '/device-files/' + data.id,
                            type: 'DELETE',
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('device-file-table');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'download') {
                    window.open("/device-files/download/" + data.uuid);
                }
            });

            /**
             * 清空按钮
             */
            $('#accessory-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该设备的附件信息吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'accessories',
                        data: { deviceId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('accessory-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            $('#device-relation-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该设备的关联设备吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'device-relations',
                        data: { deviceId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('device-relation-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            $('#iot-device-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该设备的相关物联设备吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'iot-devices',
                        data: { deviceId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('iot-device-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            /**
             * 刷新按钮
             */
            $('#device-info-refresh').on('click', function () {
                loadDeviceInfo();
            });

            $('#accessory-refresh-btn').on('click', function () {
                table.reload('accessory-table', {
                    where: {
                        deviceId: deviceId
                    }
                });
            });

            $('#device-relation-refresh-btn').on('click', function () {
                table.reload('device-relation-table', {
                    where: {
                        deviceId: deviceId
                    }
                });
            });

            $('#iot-device-refresh-btn').on('click', function () {
                table.reload('iot-device-table', {
                    where: {
                        deviceId: deviceId
                    }
                });
            });

        });
    </script>
</body>

</html>